@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">
<style>
    .am-form-horizontal .am-radio,
    .am-form-horizontal .am-form-label {
        padding-top: 0 !important
    }

    .red6 {
        color: #c61b18;
        font-size: 16px;
        font-weight: bold;
    }

    .remark {
        padding: 0 15px;
    }
</style>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ title }}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="/home/member/index" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="/home/member/index">首页</a></li>
          <li><a href="">补货</a></li>
        </ol>
    </div>
    <div class="am-cf cart-panel" id="">
        <div class="am-panel am-panel-default">
            <div class="am-panel-hd">截止上次补货时间：<span class="red">@{{replenish.addtime}}</span></div>
            <div class="am-panel-bd">
            门店可补货<span class="red">@{{replenish}}</span>元
<!-- 			，复消<span class="red">@{{replenish.resale}}</span>元
            </div> -->
<!--            <div class="am-panel-bd">
                门店剩余可报单<span class="red">@{{reDeclaration}}</span>件，复消<span class="red">@{{reRepeat}}</span>元
        </div> -->
        </div>
<!--        <div class="pickSelf" style="text-align: right;padding-right: 10px">
                <label class="am-checkbox-inline">
                    <input type="checkbox" v-model="pick"> 自提
                </label>
            </div> -->
        <div class="am-panel-group" id="accordion">
            <div class="am-panel am-panel-default" v-for="val,index in allgoods">
            <div class="am-panel-hd" @click="chooseGoods(index,val.specs_txt)">
                    <h4 class="am-panel-title"
                        :data-am-collapse="JSON.stringify({parent: '#accordion', target: '#'+val.id})">
                        @{{val.goodsname}}</h4>
                </div>
                <div :id="val.id" class="am-panel-collapse am-collapse">
                    <div class="am-panel-bd">
                        <form class="am-form am-form-horizontal am-cf" v-if="val.specs">
                            <div class="am-form-group">
                                <label for="" class="am-u-sm-4 am-form-label">门店库存</label>
                                <div class="am-u-sm-8">
                                    <input type="number" id="" class="am-input-sm" v-model="val.inventory" disabled>
                                </div>
                            </div>
                            <div class="am-form-group" v-for="a,b in val.specs" :key="b">
                                <label class="am-u-sm-5 am-form-label">@{{b}}</label>
                                <div class="am-u-sm-7">
                                <label class="am-radio am-success" v-for="c,d in a" :key="d">
                                        <input type="radio" :name="b+val.id" :value="c" data-am-ucheck checked>@{{c}}
                                    </label>
                                </div>
                            </div>
                            <div class="am-form-group" v-show="noshow(index)">
                                <label for="" class="am-u-sm-4 am-form-label">商品单价</label>
                                <div class="am-u-sm-8">
                                <input type="number" id="" class="am-input-sm" placeholder=""
                                          v-model="val.price">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="" class="am-u-sm-4 am-form-label">补货数量</label>
                                <div class="am-u-sm-8">
                                <input type="number" id="" class="am-input-sm" placeholder="请输入该规格用于复消数量"
                                           v-model="invoices">
                                </div>
                            </div>
                            <div class="am-form-group" v-show="noshow(index)">
                                <label for="" class="am-u-sm-4 am-form-label">报单情况</label>
                                <div class="am-u-sm-8">
                                <textarea name="" :id="'textarea'+area1+val.id" rows="5" disabled
                                              class="am-input-sm" placeholder="请认真确认报单情况再提交"
                                              v-model="declaration_spec"></textarea>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="" class="am-u-sm-4 am-form-label">复消情况</label>
                                <div class="am-u-sm-8">
                                <textarea name="" :id="'textarea'+area2+val.id" rows="5" disabled
                                              class="am-input-sm" placeholder="请认真确认复消情况再提交"
                                              v-model="repeat_spec"></textarea>
                                </div>
                            </div>
                            <div class="am-form-group remark">

                                <span>注:</span>报单数量 <span class="red6">@{{ specsDeclaration }}</span>件,折扣 <span class="red6">@{{ specsRepeat*val.price }}</span>元

                            </div>

                            <button type="button" class="am-btn am-btn-success am-round am-btn-xs am-fr"
                                    v-on:click="orderPage(index,declaration_spec,repeat_spec,val.gid,val.id)">确认补货
                            </button>
                            <button type="button" class="am-btn am-btn-secondary am-round am-btn-xs am-fr"
                                    style="margin-right: 5px;" v-on:click="addSpecs(index,area2,val.id)">添加复消
                            </button>
                            <button v-show="noshow(index)" type="button"
                                    class="am-btn am-btn-secondary am-round am-btn-xs am-fr" style="margin-right: 5px;"
                                    v-on:click="addSpecs(index,area1,val.id)">添加报单
                            </button>
                            <button type="button" class="am-btn am-btn-warning am-round am-btn-xs am-fr"
                                    style="margin-right: 5px;" v-on:click="resetval(val.id)">清空重选
                            </button>
                        </form>

                        <form class="am-form am-form-horizontal am-cf" v-else>
                            <div class="am-form-group">
                                <label for="" class="am-u-sm-4 am-form-label">门店库存</label>
                                <div class="am-u-sm-8">
                                    <input type="number" id="" class="am-input-sm" v-model="val.inventory" disabled>
                                </div>
                            </div>
                            <div class="am-form-group" v-show="noshow(index)">
                                <label for="" class="am-u-sm-4 am-form-label">商品单价</label>
                                <div class="am-u-sm-8">
                                <input type="number" id="" class="am-input-sm" placeholder="请输入用于报单数量"
                                           v-model="val.price" disabled="disabled">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="" class="am-u-sm-4 am-form-label">补货数量</label>
                                <div class="am-u-sm-8">
                                <input type="number" id="" class="am-input-sm" placeholder="请输入补货数量"
                                           v-model="invoices">
                                </div>
                            </div>
                            <div class="am-form-group remark" v-if="declaration || invoices">
                                <span>注:</span>数量 <span class="red6">@{{ invoices }}</span>件,金额 <span class="red6">@{{ invoices*val.price }}</span>元
                            </div>
                            <button type="button" class="am-btn am-btn-success am-round am-btn-xs am-fr"
                                    v-on:click="orderPage(index,declaration,invoices,val.gid,val.id)">确认补货
                            </button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            pick: false, //是否自提
            title: '我要补货',
            allgoods: [],//所有货物
            declaration: '',//报单数量
            invoices: '',//复消数量
            declaration_spec: '',//报单规格
            repeat_spec: '',//复消规格
            // specsdetial:'',//所有规格
            area1: 'declaration',//报单文本框
            area2: 'repeat',//复消文本框
            order: {
                gid: '',
                invoices_specs: '',
                resale_specs: '',
            },
            replenish: {},
            //当前商品价格
            price: '',
            //当前商品数量
            index: '',
            //选择商品是否有规格
            isSpecs: false,

            //折扣总数量

            specsRepeat:0,
            //报单总数量
            specsDeclaration:0
        },
        computed: {

            //剩余折扣价格

            reRepeat: function () {
                if (this.isSpecs) {
                    return app.replenish.resale-app.specsRepeat * app.price
                } else {
                    return app.replenish.resale-app.invoices * app.price
                }
            },
            //剩余报单数量
            reDeclaration: function () {
                if (this.isSpecs) {
                    return app.replenish.invoices-app.specsDeclaration
                } else {
                    return app.replenish.invoices-app.declaration
                }
            }
        },
        methods: {
            chooseGoods(index, type) {
                app.invoices =app.declaration=app.specsRepeat=app.specsDeclaration= 0
                app.declaration_spec = app.repeat_spec = ''
                app.price = app.allgoods[index].price
                app.isSpecs = type !== null
            },
             //是否自提        
            //初始化 系统管理员列表
            initialize: function () {
                var rico = this
                $.post("/home/stores/getReplenish", {'_token': '{{csrf_token()}}', class: 'select'}, function (res) {
                    // console.log(res)
                    if (res.code) {
                        rico.allgoods = res.data
                        rico.replenish = res.invoices
                        console.log(rico.allgoods,rico.replenish)
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            orderPage: function (index, declaration, invoices, gid, id) {
                var rico = this
                // console.log(declaration,repeat,id)
                rico.order.gid = gid
                //报单
                rico.order.invoices_specs = declaration
                // 复消
                rico.order.invoices = invoices
                // console.log(rico.order)
                if (declaration == 0 && invoices == 0) {
                    layer.msg('请先填写对应补货数量');
                    return false
                }
                if (declaration < 0 || invoices < 0) {
                    layer.msg('请输入正确的数量');
                    return false
                }
                if (rico.allgoods[index].specs) {
                    if (!$('#textareadeclaration' + id).val() && !$('#textarearepeat' + id).val()) {
                        layer.msg('请先添加选择');
                        return false
                    }
                }
                var pick_self = app.pick ? 1 : 0;
                $.post("/home/stores/getReplenish", {
                    '_token': '{{csrf_token()}}',
                    class: 'add',
                    order: rico.order,
                    id: id,
                    pick_self: pick_self
                }, function (res) {
                    // console.log(res)
                    if (res.code) {
                        window.location.href = "/home/stores/orderPage?type=replenish&id=" + res.data;
                    } else {
                        layer.msg(res.data);
                    }
                });

                // window.location.href="/home/stores/orderPage";
            },
            // 添加规格
            addSpecs: function (index, area, id) {
                // specsRepeat:'',
                //     specsDeclaration:''
                var rico = this
                // var str = rico.specifications;
                // console.log(area)
                if (area == 'declaration') {
                    var str1 = $('#textarea' + area + id).val();
                    if (rico.declaration == 0) {
                        layer.msg('请填写相应报单数量');
                        return false
                    }
                    // var str = $('#textarea'+id).val(); //先获取原有的值
                    if (rico.allgoods[index].specs) {

                        for (var i in rico.allgoods[index].specs) {
                            str1 = str1 + $(":radio[name=" + i + id + "]:checked").val() + '-'; //拼接新值
                            // console.log(str1)
                        }
                        }
                        str1 = str1 + rico.declaration + ';'
                        $('#textarea' + area + id).val(str1)
                        rico.declaration_spec = $('#textarea' + area + id).val()
                        app.specsDeclaration +=parseInt(app.declaration)
                        } else {
                        var str2 = $('#textarea' + area + id).val();
                    if (rico.repeat == 0) {
                        layer.msg('请填写相应复消数量');
                        return false
                    }
                    if (rico.allgoods[index].specs) {
                        // console.log(rico.allgoods[index])
                        for (var i in rico.allgoods[index].specs) {
                            str2 = str2 + $(":radio[name=" + i + id + "]:checked").val() + '-'; //拼接新值
                        }
                    }
                    str2 = str2 + rico.repeat + ';'
                    $('#textarea' + area + id).val(str2)
                    rico.repeat_spec = $('#textarea' + area + id).val()
                    app.specsRepeat +=parseInt(app.repeat)
                }

            },
            // 清空
            resetval: function (id) {
                var rico = this
                app.specsRepeat = app.specsDeclaration=0
                rico.declaration_spec = ''
                rico.repeat_spec = ''
                $('#textareadeclaration' + id).val('')
                $('#textarearepeat' + id).val('')
            },
            noshow: function (index) {
                var rico = this
                if (rico.allgoods[index].gid == 15 || rico.allgoods[index].gid == 16 || rico.allgoods[index].gid == 22) {
                    return false
                } else {
                    return true
                }
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
    
</script>
</html>
